<template>
	<view>
		<view class="top">
			<!-- 状态栏 -->
			<view class="status-bar" :style="{height: statusBarH + 'px'}"></view>
			<!-- 导航栏 -->
			<view class="nav-bar d-c-c" :style="{height: (customBarH-statusBarH) + 'px'}">
				<view 
					:class="['nav-bar-title', {'active':tabIndex==index}]" 
					v-for="(tab, index) in tabList" :key="index"
					@click="tabIndex = index"
				>{{tab.name}}</view>
			</view>
		</view>
		<Book :height="customBarH" v-if="tabIndex==0"></Book>
		<UserBook :height="customBarH" v-if="tabIndex==1"></UserBook>
	</view>
</template>

<script>
	import Book from './book.vue';
	import UserBook from './userBook.vue';
	export default {
		data() {
			return {
				statusBarH: getApp().globalData.statusBarH,
				customBarH: getApp().globalData.customBarH,
				tabIndex: 1,
				tabList: [
					{name: '官方词库'},
					{name: '我的词库'}
				],
			}
		},
		components: {
			Book,
			UserBook
		},
		onLoad() {
			if (!this.$store.state.isLogin) {
				uni.$u.toast('登录超时请重新登录')
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login',
					});
				}, 2000)
				return false
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
	}
	.nav-bar {
		width: 100%;
		background-color: #EEFAFF;
		
		.nav-bar-title {
			padding: 0 40rpx;
			font-size: 32rpx;
			color: #666666;
			font-weight: 700;
			
			&.active {
				font-size: 36rpx !important;
				color: #000000 !important;
			}
		}
	}
</style>
